// todo 先给返回按钮绑定个返回事件
$('.back').addEventListener('click', () => {
    location.href = 'http://10.55.3.8:5500/index.html'
})

// todo 渲染热门搜索数据 发送本地请求
// *创建请求对象
const xhr = new XMLHttpRequest()
// *链接服务器
xhr.open('GET', '../json/hotDatas.json')
// *发送请求
xhr.send()
// *设置监听器看是否成功获得数据
xhr.onreadystatechange = () => {
    if (xhr.readyState === 4) {
        if (xhr.status === 200) {
            // *获取数据
            let data = JSON.parse(xhr.responseText)
            // console.log(data)
            // todo 获取hot  并渲染数据
            let hot = $('.hot')
            hot.innerHTML = data.map(function (obj) {
                return `<li>${obj.name}</li>`
            }).join('')

            // todo 给热门搜索li循环绑定tap事件
            gets('.hot li').forEach((hli) => {
                myTouch.tap(hli, () => {
                    $('.search input').value = hli.innerHTML
                })
            })
        }
    }
}


// todo 获取浏览器本地存储空间的数据
var localData = JSON.parse(localStorage.getItem('localData')) || []

// ! 初始化渲染历史搜索列表
render()

// todo 给搜索按钮绑定移动端点击事件
myTouch.tap($('.btn'), () => {
    let val = $('.btn').previousElementSibling.value.trim()
    if (!val) return;
    // *添加之前先排他 排缓存里的他
    let delId = localData.lastIndexOf(val)
    // *找到了，删除缓存里的那个数据
    if (delId > -1) localData.splice(delId, 1)
    // *添加新搞来的数据
    localData.unshift(val)
    // *将数据加入到缓存当中
    localStorage.setItem('localData', JSON.stringify(localData))
    // *重新渲染
    render()
    // *每次点击之后清空输入框
    $('.btn').previousElementSibling.value = ''

})

// todo 给删除按钮绑定移动端点击事件
myTouch.tap($('.del'), () => {
    localStorage.clear()
    localData = []
    render()
})

// todo 封装一个渲染缓存数据的函数
function render() {
    // *渲染历史搜索数据
    $('.history').innerHTML = localData.map((item, idx) => {
        return `<li del-id = "${idx}">${item}</li>`
    }).join('')

    // * 给历史搜索列表循环绑定tap事件  因为每次搜索完顺序都会被打乱，所以要重新获取，重新绑定
    gets('.history li').forEach((oli) => {
        myTouch.tap(oli, () => {
            $('.search input').value = oli.innerHTML
        })
    })

    // *如果历史ul里的内容为空，则隐藏history，否则显示history
    if ($('.history').innerHTML !== '') {
        $('.bottom').classList.add('show')
    } else {
        $('.bottom').classList.remove('show')
    }
}




